<script setup>
import {ref, defineProps, inject, computed, defineEmits} from "vue";
import {wordFormedTagContextKey} from "@/components/WordFormedTag/constants";
import {remove} from 'lodash-unified';
import {formsOutCssMapping} from "@/components/constants";
import CommonTagDisplay from "@/components/WordFormedTag/CommonTagDisplay.vue";

let props = defineProps(["label", "plain"]);
let emits = defineEmits(["change"]);

let ownModel = defineModel();
// const checked = ref(true);

const wordFormedTagGroup = inject(wordFormedTagContextKey, undefined);
let theGroupModelValue = wordFormedTagGroup?.modelValue?.value;

const onChangeFunc = (status) => {

    if (theGroupModelValue) {
        if (status && theGroupModelValue.findIndex(ele => ele === props.label) < 0) {
            theGroupModelValue.push(props.label);
        } else if (!status && theGroupModelValue.findIndex(ele => ele === props.label) >= 0) {
            remove(theGroupModelValue, ele => ele === props.label);
        }
    } else {
        emits('update:modelValue', status);
    }
    emits("change", status);

}

// console.log('setting up WordFormedTag with initating theGroupModelValue with ',theGroupModelValue);

const model = computed(
    () => {
        // console.log('getter in compute model from WordFormedTag with props.label : ',props.label);
        return theGroupModelValue ? theGroupModelValue.findIndex(ele => ele === props.label) >= 0 : ownModel.value;
    }
)

const styleObject = computed(() => {
    let formPart = props.label.substring(0, props.label.lastIndexOf('.'));
    let theForm = formsOutCssMapping[formPart];
    let resultObj = {};

    resultObj["--color-formOut-checked-bg-default"] = `var(--color-`+theForm+`)`;
    if (props.plain) {
        resultObj["--color-formOut-default-bg-color"] = `var(--color-`+theForm+`-bg-color)`;
        resultObj["--color-formOut-default"] = `var(--color-`+theForm+`)`;
        // resultObj["background-color"] = `var(--color-`+theForm+`-bg-color)`;
        resultObj["--el-color-info-light-9"] = `var(--color-`+theForm+`-bg-color)`;
        resultObj["--el-color-info"] = `var(--color-`+theForm+`)`;
        resultObj["--el-tag-bg-color"] = `var(--color-` + theForm + `-bg-color)`;
        resultObj["--el-tag-border-color"] = `var(--color-` + theForm + `)`;
        resultObj["--el-tag-hover-color"] = `var(--color-` + theForm + `)`;
        resultObj["---el-tag-text-color"] = `var(--color-` + theForm + `)`;
        // resultObj["color"] = `var(--color-` + theForm + `)`;
        resultObj["border-style"] = `solid`;
    }else{

    }

    return resultObj;
})

</script>

<template>
<!--  {{ model }}-->
    <el-check-tag :checked="model" @change="onChangeFunc" class="wordFormedTag" size="small" :style="styleObject">
        <CommonTagDisplay :label="label" />
    </el-check-tag>
</template>

<style scoped>
.el-check-tag.wordFormedTag {
    --color-formOut-default-bg-color:var(--el-color-info-light-9);
    --color-formOut-default:var(--el-color-info);
    background-color: var(--color-formOut-default-bg-color);
    font-weight: 520;
    --el-font-size-base: 12px;
    line-height: 7px;
    padding: 7px 9px;
    margin: 3px;
    --el-border-radius-base: 3px;
    color: var(--color-formOut-default);
    --color-formOut-default-bg-color:var(--el-color-info-light-9);
    /*background-color: var(--el-color-info-light-9);*/
    border-width: 1.5px;
}

.el-check-tag.wordFormedTag.is-checked {
    background-color: var(--color-formOut-checked-bg-default);
    color: #ffffff;
}
</style>